<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import delimg from '@/assets/images/del.png'
import { Search } from '@element-plus/icons-vue';
import { groupImgPage, runningCondition, cameralayinfo, updateDevice, CameraWorker, quickIdentify, DeviceImage, delDeviceImage, ImeiAll, CardIdAll, delGroupImg } from '@/utils/api.js'
import wlsLarge from '@/components/common/wls-large.vue'
import wlsPopup from '@/components/common/wls-popup.vue'
let cameraEnvirId = '';
let deviceType = 0;
let areaId = '';
let date = '';
let username = '';
let pageNum = 1;
let imeiList = [];
const route = useRoute();
const router = useRouter();
const rcd = ref({});
const layinfo = ref({});
const gdate = ref('');
const identifyType = ref('');
const keywords = ref('');

const iswl = ref(false);
const isady = ref(false);
const wlm = ref([]);
const layImg = ref([]);
const gip = ref([]);
const totalElements = ref(0);
const currentPage = ref(1);
let Worker = [];
const ruleForm = ref({
    label: '',
    layUser: '',
    oneKmGridNum: '',
    layTime: '',
    recovDate: '',
    lon: '',
    lat: '',
    altitude: '',
    envirType: '',
    smallEnvir: '',
    remark: ''
});
const ruleFormRef = ref(null);

const validateCoordinates = (lon, lat) => {
    lon = parseFloat(lon);
    lat = parseFloat(lat);

    if (!isNaN(lon) && !isNaN(lat) && lon >= -180 && lon <= 180 && lat >= -90 && lat <= 90 && lon !== 0 && lat !== 0) {
        return true; // 符合要求
    } else {
        return false; // 不符合要求
    }
}

const quick = async (data) => {
    if (data.aiResult != null) {
        let str = data.aiResult.split('#')[0];
        ElMessageBox.confirm(
            '确定要将“' + str + '”当作识别结果?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                let params = {
                    "groupId": data.groupId,
                    "identifyPeople": username,
                    "speciesName": str
                }
                quickIdentify(params).then(res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: '已鉴定',
                        })
                        getgroupImgPage();
                        getidentifyCount();
                    }
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消鉴定',
                })
            })
    }
}


const getImeiAll = async () => {
    let res = await ImeiAll(areaId)
    if (res.code == '200') {
        imeiList = res.data;
    }
}

const getCardIdAll = async () => {
    let res = await CardIdAll(areaId)
    if (res.code == '200') {
        imeiList = res.data;
    }
}

const getCameraWorker = async () => {
    let res = await CameraWorker(areaId)
    if (res.code == '200') {
        Worker = res.data;
    }
};


const delGroupImgPage = (data, x) => {
    ElMessageBox.confirm(
        '确定要永久删除该文件吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let params = '?groupId=' + data.groupId + '&userName=' + username;
            delGroupImg(params).then(res => {
                if (res.code == '200') {
                    getgroupImgPage()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                } else {
                    ElMessage({
                        type: 'info',
                        message: res.data.message,
                    })
                }

            })
                .catch(err => {
                    ElMessage({
                        type: 'info',
                        message: '网络异常',
                    })
                })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

const refReshGroupImgPage = () => {
    pageNum = 1;
    currentPage.value = 1;
    getgroupImgPage()
}

const formatTime = () => {
    let data = gdate.value
    if (data && data != "") {
        let year = data.getFullYear();
        let month = (data.getMonth() + 1) > 9 ? (data.getMonth() + 1) : '0' + (data.getMonth() + 1);
        let day = data.getDate() > 9 ? data.getDate() : '0' + data.getDate();
        date = year + '-' + month + '-' + day;
    } else {
        date = '';
    }
    refReshGroupImgPage()
}

const delImg = async (url, x) => {
    let str = '?cameraEnvirId=' + cameraEnvirId + '&deviceType=' + deviceType + '&url=' + url;
    let res = await delDeviceImage(str)
    if (res.code == '200') {
        layImg.value.splice(x, 1)
    }
}


const amendlay = () => {
    ruleForm.value = JSON.parse(JSON.stringify(layinfo.value));
    isady.value = true;
}

const handleSizeChange = (val) => {
    pageNum = val;
    getgroupImgPage();
};

const goaut = (data) => {
    let name = route.query.name;
    let path = route.path.split('/')[1];

    let hisa = {
        pageNum: pageNum,
        currentPage: currentPage.value,
        identifyType: identifyType.value,
        date: date,
        keywords: keywords.value
    }
    window.sessionStorage.setItem('hisa', JSON.stringify(hisa));
    router.push({ path: '/' + path + '/wlsauthenticate', query: { name: name, groupId: data.groupId } });
}

const getgroupImgPage = async () => {
    let params = '?cameraEnvirId=' + cameraEnvirId + '&identifyType=' + identifyType.value + '&date=' + date + '&keywords=' + keywords.value + '&pageNum=' + pageNum + '&pageSize=6'
    let res = await groupImgPage(params);
    if (res.code == '200') {
        res.data.content.forEach(e => {
            e['check'] = false
        });
        gip.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
};

const getrunningCondition = async () => {
    let params = '?cameraEnvirId=' + cameraEnvirId + '&deviceType=' + deviceType;
    let res = await runningCondition(params);
    if (res.code == '200') {
        rcd.value = res.data;
    }
};

const getcameralayinfo = async () => {
    let params = '?cameraEnvirId=' + cameraEnvirId + '&deviceType=' + deviceType;
    let res = await cameralayinfo(params);
    if (res.code == '200') {
        let id = res.data.layUser;
        let str = ''
        for (let i = 0; i < Worker.length; i++) {
            if (Worker[i][0] === id) {
                str = Worker[i][1]
            }
        }
        res.data.layUser = str;
        layinfo.value = res.data;
    }
};

const getLayImg = async () => {
    let params = '?cameraEnvirId=' + cameraEnvirId + '&deviceType=' + deviceType;
    let res = await cameralayinfo(params);
    if (res.code == '200') {
        if (res.data.urlStr != null && res.data.urlStr != '') {
            layImg.value = res.data.urlStr.split('#')
        }
    }
}

const openLarge = (data) => {
    wlm.value = data;
    iswl.value = true;
};


const uploadimg = async (event, num) => {
    let files = event.target.files;
    if (files.length > 3) {
        ElMessage({
            message: '一次最多上传三张',
            type: 'warning',
        })
        event.target.value = null;
        return;
    } else {
        var fileArray = Array.from(files);
        let formData = new FormData();
        formData.append('cameraEnvirId', cameraEnvirId);
        formData.append('deviceType', deviceType);
        fileArray.forEach((file, x) => {
            formData.append('files', file);
        });
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let res = await DeviceImage(formData)
        if (res.code == '200') {
            loading.close();
            getLayImg();
            ElMessage({
                message: '上传成功',
                type: 'success',
            })
            event.target.value = null
        } else {
            loading.close();
            ElMessage({
                message: '您的网路不稳定，上传失败，请稍后再试',
                type: 'success',
            })
        }

        setTimeout(function () {
            loading.close();
        }, 5000)
    }
};

const formatProcessingTime = (data) => {
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        let month = (datetime.getMonth() + 1) > 9 ? (datetime.getMonth() + 1) : '0' + (datetime.getMonth() + 1);
        let date = datetime.getDate() > 9 ? datetime.getDate() : '0' + datetime.getDate();
        let Hours = datetime.getHours() > 9 ? datetime.getHours() : '0' + datetime.getHours();
        let Minutes = datetime.getMinutes() > 9 ? datetime.getMinutes() : '0' + datetime.getMinutes();
        let Seconds = datetime.getSeconds() > 9 ? datetime.getSeconds() : '0' + datetime.getSeconds();
        return year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;
    } else {
        return ""
    }
}

const submitForm = async (formEl) => {
    if (!formEl) return;
    if (validateCoordinates(ruleForm.value.lon, ruleForm.value.lat)) {
        await formEl.validate((valid, fields) => {
            if (valid) {
                ruleForm.value.layTime = formatProcessingTime(ruleForm.value.layTime);
                ruleForm.value.recovDate = formatProcessingTime(ruleForm.value.recovDate);
                ruleForm.value['deviceType'] = deviceType;

                updateDevice(ruleForm.value).then(res => {
                    if (res.code == '200') {
                        getcameralayinfo();
                        isady.value = false;
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                    }
                })
            } else {
                console.log('error submit!', fields)
            }
        })
    } else {
        ElMessage({
            message: '请输入正确的经纬度',
            type: 'warning',
        })
    }
};

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields();
    isady.value = false;
};

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    username = window.sessionStorage.getItem('zhName');
    cameraEnvirId = route.query.id;
    if (route.query.name == '实时相机') {
        deviceType = 0;
        getImeiAll();
    } else {
        deviceType = 1;
        getCardIdAll();
    }

    setTimeout(function () {
        if (window.sessionStorage.getItem('hisa') != null) {
            let data = JSON.parse(window.sessionStorage.getItem('hisa'));
            identifyType.value = data.identifyType;
            currentPage.value = data.currentPage;
            date = data.date;
            gdate.value = new Date(data.date);
            keywords.value = data.keywords;
            pageNum = data.pageNum
            getgroupImgPage();
            window.sessionStorage.removeItem('hisa')
        } else {
            getgroupImgPage();
        }
    }, 500)

    getLayImg();
    getCameraWorker();
    getrunningCondition();
    getcameralayinfo();
});

onBeforeRouteLeave((to, from, next) => {
    // 在进入路由之前执行的逻辑操作
    // 可以进行一些权限验证、数据加载等操作
    let oldPath = to.path.split('/')[1];
    let newPath = from.path.split('/')[1];
    if (oldPath != newPath) {
        window.sessionStorage.removeItem('Cache');
    }
    next()
});

</script>
<template>
    <div class="wls-details">
        <!-- 标题 B-->
        <div class="wls-details-title">
            <div class="wls-details-title-txt">
                <span>{{ route.query.name }}</span>
                <span class="icon iconfont icon-xiala"></span>
                <span>查看详情</span>
            </div>
            <el-button @click.stop="router.go(-1)">返回</el-button>
        </div>
        <!-- 标题 E-->
        <!-- 内容 B-->
        <div class="wls-details-container">
            <div class="wls-details-container-left">
                <div class="wls-details-container-left-top bcb">
                    <div class="wdct">
                        <span>当前运行情况</span>
                    </div>
                    <div class="wls-details-table">
                        <div style="width: 25%;"><span>工作时长</span></div>
                        <div style="width: 75%;"><span>{{ rcd.workTime }}</span></div>
                    </div>
                    <div class="wls-details-table">
                        <div style="flex: 1;"><span>拍摄照片</span></div>
                        <div style="flex: 1;"><span>{{ rcd.imgSum }}张</span></div>
                        <div style="flex: 1;"><span>拍摄视频</span></div>
                        <div style="flex: 1;"><span>{{ rcd.videoSum }}条</span></div>
                    </div>
                    <div class="wls-details-table">
                        <div style="flex: 1;"><span>平均拍摄(照片)</span></div>
                        <div style="flex: 1;"><span>{{ rcd.avgImgSum }}张</span></div>
                        <div style="flex: 1;"><span>平均拍摄(视频)</span></div>
                        <div style="flex: 1;"><span>{{ rcd.avgVideoSum }}条</span></div>
                    </div>
                    <div class="wls-details-table">
                        <div style="flex: 1;"><span>未鉴定照片</span></div>
                        <div style="flex: 1;"><span>{{ rcd.notIdentifySum }}张</span></div>
                        <div style="flex: 1;"><span>已鉴定照片</span></div>
                        <div style="flex: 1;"><span>{{ rcd.identifySum }}条</span></div>
                    </div>
                    <div class="wls-details-table" style="border-bottom: 1px solid #DCDFE6;">
                        <div style="flex: 1;"><span>有效照片/视频 </span></div>
                        <div style="flex: 1;"><span>{{ rcd.effectiveSum }}张/{{ rcd.effectiveRate }}%</span></div>
                        <div style="flex: 1;"><span>删除照片/视频</span></div>
                        <div style="flex: 1;"><span>{{ rcd.delSum }}条/{{ rcd.delRate }}%</span></div>
                    </div>
                </div>
                <div class="wls-details-container-left-bottom bcb scol">
                    <div class="wdct">
                        <span>布设信息</span>
                        <div style="color: var( --wls-color);" @click.stop="amendlay()">
                            <i style="margin-right: 0.08rem;" class="icon iconfont icon-xiugaixinxi"></i>
                            <span>修改信息</span>
                        </div>
                    </div>

                    <div class="wls-details-list">
                        <div>设备编号</div>
                        <div>{{ layinfo.imei }}</div>
                        <div>标签</div>
                        <div>{{ layinfo.label }}</div>
                    </div>
                    <div class="wls-details-list">
                        <div>布设人</div>
                        <div>{{ layinfo.layUser }}</div>
                        <div>布设网格</div>
                        <div>{{ layinfo.oneKmGridNum }}</div>
                    </div>
                    <div class="wls-details-list">
                        <div>布设时间</div>
                        <div>{{ layinfo.layTime }}</div>
                        <div>回收时间</div>
                        <div>{{ layinfo.recovDate }}</div>
                    </div>
                    <div class="wls-details-list">
                        <div>经纬度</div>
                        <div>{{ layinfo.lon ? layinfo.lon.toFixed(6) : '' }}~{{ layinfo.lat ? layinfo.lat.toFixed(6) :
                            '' }}
                        </div>
                        <div>海拔</div>
                        <div>{{ layinfo.altitude }}m</div>
                    </div>
                    <div class="wls-details-list">
                        <div>生境类型</div>
                        <div>{{ layinfo.envirType }}</div>
                        <div>小生境</div>
                        <div>{{ layinfo.smallEnvir }}</div>
                    </div>
                    <div class="wls-details-list">
                        <div>备注</div>
                        <div style="width: calc(100% - 0.8rem);">{{ layinfo.remark }}</div>
                    </div>

                    <div class="wdct" style="margin-top: 0.16rem;">
                        <span>布设照片</span>
                        <div style="color: var( --wls-color);position: relative;">
                            <!-- <svg class="wls-icon" aria-hidden="true">
                                <use xlink:href="#icon-tianjia1"></use>
                            </svg> -->
                            <i style="color: var(--wls-color);" class="icon iconfont icon-tianjia1"></i>
                            <span style="margin-left: 0.08rem;">添加照片</span>
                            <input class="wls-upload" @change="uploadimg($event, 0)" ref="upload" multiple
                                accept="image/*" type="file" />
                        </div>
                    </div>

                    <ul class="wls-details-ul">
                        <li v-for="(i, index) in layImg" @click.stop="openLarge([i])">
                            <video v-if="$wlsf.filiv(i) == 4" :src="i" alt=""></video>
                            <img v-else :src="i" alt="">
                            <div class="wls-details-li-del" @click.stop="delImg(i, index)">
                                <img :src="delimg" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="wls-details-container-right bcb">
                <div class="wdct">
                    <span>拍摄内容</span>
                </div>
                <el-row justify="space-between" :gutter="10">
                    <el-col :span="8">
                        <el-select style="width: 100%;" v-model="identifyType" @change="refReshGroupImgPage()" clearable
                            class="m-2" placeholder="全部鉴定类型" size="large">
                            <el-option label="已鉴定" value="已鉴定" />
                            <el-option label="未鉴定" value="未鉴定" />
                            <el-option label="无法鉴定" value="无法鉴定" />
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-date-picker style="width: 100%;" v-model="gdate" type="date" @change="formatTime()"
                            placeholder="选择日期" size="large" />
                    </el-col>
                    <el-col :span="8">
                        <el-select style="width: 100%;" v-model="keywords" @change="refReshGroupImgPage()" filterable
                            clearable class="m-2" placeholder="填选相机编号" size="large">
                            <el-option v-for="(i, index) in imeiList" :key="i.id" :label="i.imei" :value="i.id" />
                        </el-select>
                    </el-col>
                </el-row>
                <ul class="wls-details-container-right-content">
                    <li class="bcb" v-for="(i, index) in gip " :key="i.groupId">
                        <div class="wdcrc" :class="i.identifyType == '已鉴定' ? 'wdcrcy' : 'wdcrcw'">
                            <span>{{ i.identifyType }}</span>
                        </div>
                        <div class="wdcrc-img" @click.stop="openLarge(i.urlList)">
                            <video v-if="$wlsf.filiv(i.urlList[0]) == 4" :src="i.urlList[0]" alt=""></video>
                            <img v-else :src="i.urlList[0]" alt="">
                            <div class="wdcrc-time">
                                <span>{{ i.shootingTime }}</span>
                            </div>
                            <div class="wdcrc-num">
                                <i style="margin-right: 0.08rem;" class="icon iconfont icon-zhaopian"></i>
                                <span>{{ i.urlList.length }}张</span>
                            </div>
                        </div>
                        <div class="wdcrc-result">
                            <div>
                                <div><span>组编号</span></div>
                                <div><span style="color: #AAA;">{{ i.groupSort }}</span></div>
                            </div>
                            <div style="margin: .08rem 0;">
                                <div><span>AI识别</span></div>
                                <div v-if="i.aiResult != null">
                                    <span style="color: #AAA;">{{ i.aiResult == null ? '' : i.aiResult.split('#')[0]
                                        }}</span>
                                </div>
                                <div v-else>
                                    <span style="color: #AAA;">无识别结果</span>
                                </div>
                            </div>
                            <div>
                                <div><span>鉴定结果</span></div>
                                <div><span style="color: #AAA;">{{ i.identifyResult == null ? '' :
                                    i.identifyResult.split('#')[0]
                                        }}</span></div>
                            </div>
                        </div>

                        <div class="wdcrc-com">
                            <div><span style="color: #F84848;" @click.stop="delGroupImgPage(i, index)">删除照片</span></div>
                            <div @click.stop="goaut(i)"><span>前往鉴定</span></div>
                            <div @click.stop="quick(i)"><span
                                    :style="i.aiResult == null ? 'color: #AAA;' : ''">确认结果</span>
                            </div>
                        </div>

                    </li>
                </ul>
                <el-pagination v-model:current-page="currentPage" :page-size="6" :small="true" :disabled="false"
                    background layout="total, prev, pager, next, jumper" :total="totalElements"
                    @current-change="handleSizeChange" />
            </div>
        </div>
        <!-- 内容 E-->
        <!-- 编辑弹窗 B-->
        <wls-popup v-if="isady">
            <div class="wls-info">
                <div class="d-lkb-c" @click.stop="resetForm(ruleFormRef)">
                    <!-- <svg class="wls-icon" aria-hidden="true" style="width: .4rem;height: 0.4rem;">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg> -->
                    <i class="icon iconfont icon-guanbi" style="font-size: .2rem;"></i>
                </div>
                <div class="wls-info-title">
                    <div></div>
                    <div><span>修改信息</span></div>
                </div>
                <div style="height: 0.16rem;"></div>
                <el-form ref="ruleFormRef" :model="ruleForm" label-position="top" class="demo-ruleForm" size="large"
                    status-icon>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="布设人">
                                <el-select v-model="ruleForm.layUser" filterable style="width: 100%;" class="m-2"
                                    placeholder="可输入搜索选择布设人" size="large">
                                    <el-option v-for="w in Worker" :key="w[0]" :label="w[1]" :value="w[0]" />
                                </el-select> 
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="海拔(m)">
                                <el-input style="width: 100%;" v-model="ruleForm.altitude" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="布设时间">
                                <el-date-picker style="width: 100%;" v-model="ruleForm.layTime" type="datetime"
                                    placeholder="请选择布设时间" format="YYYY/MM/DD HH:mm:ss" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="回收时间">
                                <el-date-picker style="width: 100%;" v-model="ruleForm.recovDate" type="datetime"
                                    placeholder="请选择回收时间" format="YYYY/MM/DD HH:mm:ss" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="经度">
                                <el-input style="width: 100%;" type="number" placeholder="请严格按照格式修改"
                                    v-model="ruleForm.lon" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="纬度">
                                <el-input style="width: 100%;" type="number" placeholder="请严格按照格式修改"
                                    v-model="ruleForm.lat" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="生境类型">
                                <el-select v-model="ruleForm.envirType" style="width: 100%;" class="m-2"
                                    placeholder="生境类型" size="large">
                                    <el-option label="常阔" value="常阔" />
                                    <el-option label="常阔混交" value="常阔混交" />
                                    <el-option label="落阔" value="落阔" />
                                    <el-option label="针阔混交" value="针阔混交" />
                                    <el-option label="针叶林" value="针叶林" />
                                    <el-option label="灌丛" value="灌丛" />
                                    <el-option label="草坡" value="草坡" />
                                    <el-option label="流石滩" value="流石滩" />
                                    <el-option label="滩涂" value="滩涂" />
                                    <el-option label="苇塘" value="苇塘" />
                                    <el-option label="水面" value="水面" />
                                    <el-option label="草甸" value="草甸" />
                                    <el-option label="沼泽" value="沼泽" />

                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="小生境">
                                <el-select v-model="ruleForm.smallEnvir" style="width: 100%;" class="m-2"
                                    placeholder="请选择小生境" size="large">
                                    <el-option label="河边" value="河边" />
                                    <el-option label="林下" value="林下" />
                                    <el-option label="竹林中" value="竹林中" />
                                    <el-option label="草丛" value="草丛" />
                                    <el-option label="树洞" value="树洞" />
                                    <el-option label="岩下" value="岩下" />
                                    <el-option label="公路上" value="公路上" />

                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="标签">
                        <el-input v-model="ruleForm.label" maxlength="6" placeholder="不能超过六个字符" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="ruleForm.remark" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            保存
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </wls-popup>
        <!-- 编辑弹窗 E-->
        <wls-large :msg="wlm" v-if="iswl" @closeLarge="iswl = false" />
    </div>
</template>
<style scoped>
.wls-details {
    width: 100%;
    height: 100%;
    padding: .06rem;
    background-color: #F5F7FA;
    overflow: hidden;
}

.wls-details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .1rem 0 .1rem;
    margin-bottom: 0.06rem;
}

.wls-details-title-txt {
    display: flex;
    align-items: center;
    color: #AAA;
}


.wls-details-title-txt>span:nth-child(2) {
    transform: rotate(-90deg);
    margin: 0 0.08rem;
}

.wls-details-title-txt>span:nth-child(3) {
    color: #333;
    font-weight: 700;
}

.wls-details-container {
    width: 100%;
    height: calc(100% - .5rem);
    padding: 0.1rem;
    display: flex;
}

.wls-details-container-left {
    flex: 4;
    height: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
}

.wls-details-container-left>div {
    padding: .24rem;
}

.wls-details-container-left-top {
    width: 100%;
    height: 3.3rem;
    margin-bottom: 0.16rem;
}

.wls-details-container-left-bottom {
    width: 100%;
    height: calc(100% - 3.5rem);
}

.wls-details-container-right {
    flex: 6;
    height: calc(100% - 0.05rem);
    margin-left: 0.16rem;
    padding: .24rem;
    position: relative;
    overflow: hidden;
}

.wdct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.16rem;
    position: relative;
}

.wdct>span:nth-child(1) {
    font-weight: 700;
    font-size: 0.18rem;
}

.wdct>div:nth-child(2) {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wls-details-table {
    width: 100%;
    height: 0.5rem;
    display: flex;
    border-width: 1px 1px 0 1px;
    /* 上 右 左 下 */
    border-style: solid;
    border-color: #DCDFE6;
}


.wls-details-table>div {
    display: flex;
    align-items: center;
    padding: 0 .16rem;
}

.wls-details-table>div:nth-child(odd) {
    /* flex: 1; */
    justify-content: flex-end;
    border-right: 1px solid #DCDFE6;
    background-color: #F5F7FA;
}

.wls-details-table>div:nth-child(even) {
    /* flex: 1; */
    color: #606266;
}

.wls-details-list {
    width: 100%;
    line-height: 0.5rem;
    display: flex;
    border-bottom: 1px solid #DCDFE6;
}

.wls-details-list>div {
    display: flex;
    align-items: center;
}


.wls-details-list>div:nth-child(odd) {
    font-weight: 700;
    width: 0.8rem;
}

.wls-details-list>div:nth-child(even) {
    width: calc((100% - 1.6rem) / 2);
    color: #606266;
    line-height: 2;
}

.wls-details-ul {
    width: 100%;
    overflow: hidden;
}

.wls-details-ul li {
    width: calc((100% - .32rem) / 3);
    height: 1.5rem;
    float: left;
    margin: 0 .16rem .16rem 0;
    background-color: #F5F7FA;
    cursor: pointer;
    position: relative;
}

.wls-details-ul li img {
    width: 100%;
    height: 100%;
}

.wls-details-ul li video {
    width: 100%;
    height: 100%;
}

.wls-details-ul li:nth-child(3n) {
    margin-right: 0;
}

.wls-details-li-del {
    width: 0.24rem;
    height: 0.24rem;
    position: absolute;
    top: 0.08rem;
    right: 0.08rem;
    z-index: 3;
}

.wls-details-li-del img {
    width: 100%;
    height: 100%;
}

.wls-details-container-right-content {
    width: 100%;
    margin-top: 0.08rem;
    padding: 0.08rem;
    overflow: hidden;
}

.wls-details-container-right-content li {
    width: calc((100% - .32rem) / 3);
    height: 3rem;
    border-radius: 4px;
    float: left;
    margin: 0 .16rem .16rem 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.wls-details-container-right-content li:nth-child(3n) {
    margin-right: 0;
}

.wdcrc {
    width: 0.8rem;
    height: 0.32rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #FFF;
    border-radius: 4px 0px;
}

.wdcrcw {
    background-color: #FCC80F;
}

.wdcrcy {
    background-color: var(--wls-color);
}

.wdcrcwf {
    background-color: #AAA;
}

.wdcrc-img {
    width: 100%;
    height: 1.5rem;
    background-color: #F5F7FA;
    position: relative;
    overflow: hidden;
}

.wdcrc-img img {
    width: 100%;
    height: 100%;
}

.wdcrc-img video {
    width: 100%;
    /* height: 100%; */
}

.wdcrc-time {
    width: 1.7rem;
    height: 0.26rem;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0.08rem;
    bottom: 0.08rem;
    z-index: 2;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.70);
    overflow: hidden;
}

.wdcrc-result {
    width: 100%;
    position: relative;
    padding: .16rem;
}

.wdcrc-result>div {
    display: flex;
    align-items: center;
}

.wdcrc-result>div>div:nth-child(1) {
    width: 0.7rem;
}

.wdcrc-checkbox {
    position: absolute;
    right: 0;
}

.wdcrc-com {
    width: 100%;
    height: .5rem;
    display: flex;
    border-radius: 0px 0px 4px 4px;
    border-top: 1px solid #DCDFE6;
}

.wdcrc-com>div {
    flex: 1;
    height: 100%;
    color: var(--wls-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #DCDFE6;
}

.wdcrc-com>div:last-child {
    border: none;
}

.wls-info {
    width: 6rem;
    padding: .24rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
</style>

<style>
.el-form-item__content {
    justify-content: center;
}
</style>